light mode
night mode
অ্যাজাক্স (Ajax)

JSONP কী এবং এর প্রয়োজনীয়তা

Web Development - অ্যাজাক্স (Ajax) - Ajax এবং JSONP (Ajax এবং JSONP এর মাধ্যমে Cross-Domain Request) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

JSONP কী?

JSONP (JavaScript Object Notation with Padding) হল একটি ডাটা ফরম্যাট যা Ajax এর মাধ্যমে ক্রস-ডোমেইন রিকোয়েস্ট করতে ব্যবহৃত হয়। Ajax রিকোয়েস্ট সাধারণত একই ডোমেইনে সীমাবদ্ধ থাকে (Same-Origin Policy)। JSONP এই সীমাবদ্ধতা অতিক্রম করার একটি পদ্ধতি, যা সাইটগুলোকে এক ডোমেইন থেকে অন্য ডোমেইনে ডেটা রিকোয়েস্ট করতে সক্ষম করে।

JSONP এর কাজের পদ্ধতি

JSONP একটি GET রিকোয়েস্ট ব্যবহার করে কাজ করে। এটি সরাসরি একটি <script> ট্যাগ যুক্ত করে জাভাস্ক্রিপ্ট কোড হিসেবে সার্ভার থেকে ডেটা লোড করে। JSONP রেসপন্স সার্ভার থেকে একটি ফাংশন কল হিসেবে আসে যা ক্লায়েন্ট সাইডে ডেটা প্রসেস করে। এটি কাজ করে নিম্নলিখিত ধাপে:

  1. ক্লায়েন্ট সাইডে একটি callback function তৈরি করা হয় যা ডেটা প্রসেস করবে।
  2. <script> ট্যাগ ব্যবহার করে JSONP রিকোয়েস্ট করা হয় এবং সেই সাথে সেই callback function এর নাম পাঠানো হয়।
  3. সার্ভার এই callback function এর নাম ব্যবহার করে একটি জাভাস্ক্রিপ্ট রেসপন্স তৈরি করে যা ডেটা পাঠায়।
  4. ক্লায়েন্ট সাইডে সেই callback function কল হয় এবং ডেটা প্রসেস হয়।

JSONP এর উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP Example</title>
</head>
<body>
    <h1>JSONP Example</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- ডেটা এখানে দেখানো হবে -->
    </div>

    <script>
        // Callback function যা JSONP রেসপন্স হ্যান্ডল করবে
        function handleResponse(data) {
            var container = document.getElementById('data-container');
            container.innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
        }

        // JSONP রিকোয়েস্ট পাঠানোর ফাংশন
        function fetchData() {
            var script = document.createElement('script');
            script.src = 'https://example.com/api?callback=handleResponse';
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

ব্যাখ্যা:

  • Callback Function: handleResponse ফাংশনটি সার্ভার থেকে প্রাপ্ত JSONP ডেটা প্রসেস করে।
  • Script Tag Creation: fetchData() ফাংশন একটি <script> ট্যাগ তৈরি করে এবং সেটি ডকুমেন্টে যোগ করে। এর মাধ্যমে ব্রাউজার সার্ভার থেকে জাভাস্ক্রিপ্ট রেসপন্স লোড করে।
  • Server Response: সার্ভার থেকে রেসপন্স আসে এভাবে:এটি সরাসরি handleResponse ফাংশন কল করে এবং ডেটা প্রসেস করে।
handleResponse({"name": "John", "age": 30});

JSONP এর প্রয়োজনীয়তা এবং সুবিধা

  1. Cross-Domain Request সমাধান:
    • JSONP একই ডোমেইনে রিকোয়েস্ট পাঠানোর সীমাবদ্ধতা ভেঙে Cross-Domain রিকোয়েস্ট করতে সক্ষম হয়। এটি সরাসরি জাভাস্ক্রিপ্ট কোড লোড করে বলে ব্রাউজার Same-Origin Policy প্রয়োগ করে না।
  2. সহজ Implementation:
    • JSONP এর মাধ্যমে Cross-Domain রিকোয়েস্ট করা খুবই সহজ, কারণ এটি শুধু একটি <script> ট্যাগ ব্যবহার করে এবং একটি callback ফাংশন কল করে।
  3. Immediate Execution:
    • JSONP রেসপন্স সরাসরি ব্রাউজারে এক্সিকিউট হয়, যা ক্লায়েন্ট সাইডে ডেটা প্রসেসিংকে দ্রুত করে।

JSONP এর সীমাবদ্ধতা

  1. GET Method Only:
    • JSONP শুধুমাত্র GET রিকোয়েস্ট সমর্থন করে। POST বা অন্য HTTP মেথড সাপোর্ট করে না, যা কিছু ক্ষেত্রে সীমাবদ্ধতা হতে পারে।
  2. Security Risks:
    • JSONP ব্যবহার করলে নিরাপত্তা ঝুঁকি থাকে, কারণ এটি একটি <script> ট্যাগের মাধ্যমে সরাসরি জাভাস্ক্রিপ্ট লোড করে। যদি সার্ভার হ্যাক হয়ে যায় বা ম্যালিশিয়াস কোড পাঠায়, তাহলে সেটি ক্লায়েন্ট সাইডে এক্সিকিউট হবে।
  3. JSONP এর রেসপন্স ফরম্যাট:
    • JSONP এর রেসপন্স একটি ফাংশন কল হিসেবে আসে। সার্ভারকে উপযুক্ত ফরম্যাটে রেসপন্স তৈরি করতে হবে, নইলে ডেটা প্রসেস করা যাবে না।

JSONP এর সারসংক্ষেপ

  • প্রয়োজনীয়তা: Cross-domain রিকোয়েস্ট করার জন্য JSONP প্রয়োজন হয়, বিশেষ করে যখন অন্যান্য ডোমেইন থেকে ডেটা লোড করতে হয়।
  • কাজের পদ্ধতি: একটি <script> ট্যাগ ব্যবহার করে JSON ডেটা একটি callback function এর মাধ্যমে প্রসেস করা হয়।
  • সুবিধা: সহজে এবং দ্রুত ডোমেইনের বাইরে রিকোয়েস্ট করার জন্য ব্যবহৃত হয়।
  • সীমাবদ্ধতা: শুধুমাত্র GET মেথড সমর্থন করে এবং নিরাপত্তার ঝুঁকি থাকে।

JSONP এখনও অনেক ক্ষেত্রে ব্যবহার করা হয়, তবে নিরাপত্তা এবং ফ্লেক্সিবিলিটির জন্য CORS (Cross-Origin Resource Sharing) বর্তমানে JSONP এর একটি আধুনিক বিকল্প হিসেবে বেশি ব্যবহৃত হয়। CORS Ajax রিকোয়েস্টের জন্য আরও বেশি নিরাপত্তা এবং নিয়ন্ত্রণ প্রদান করে।

Content added || updated By
Md. Nasir Uddin (Raju)

আরও দেখুন...

JSONP কী এবং এর প্রয়োজনীয়তা

or

Don't have an account? Register

Promotion